<template>
  <div>
    <div class="echartsbob">
      <div id="myChart"
           ref="myChart"
           :style="{width: '100%', height: '4.22rem'}"></div>
    </div>
  </div>
</template>

<script>
import echarts from "echarts";
export default {
  props: {
    growthList: {
      type: Array
    },
    type: {
      type: String
    },
    time: {
      type: String
    }
  },
  data () {
    return {};
  },
  watch: {
    growthList: {
      handler (val) {
        this.drawLine();
      },
      deep: true
    }
  },

  methods: {
    drawLine () {
      let time = this.time
      let str = ''
      if (this.type == 1) {
        str = '注册量:'
      } else if (this.type == 2) {
        str = '用户增长:'
      } else if (this.type == 3) {
        str = '关注数:'
      } else if (this.type == 4) {
        str = '关注数:'
      } else if (this.type == 5) {
        str = '用户数:'
      } else if (this.type == 6) {
        str = '关注数:'
      }
      // 初始化echarts实例
      let myChart = this.$echarts.init(this.$refs.myChart);
      let xData = this.growthList.map(item => {
        return item.key;
      });
      let yData = this.growthList.map(item => {
        return { value: item.value, timeKey: item.timekey }
      });
      // 绘制图表
      myChart.setOption({
        backgroundColor: "#fff", //背景色
        tooltip: {
          show: true,
          trigger: "axis",
          backgroundColor: "rgba(255, 255, 255, 1)",
          textStyle: {
            color: "black" //设置文字颜色
          },
          formatter (params) {
            // console.log("params", params);
            if (time == 5) {
              return params[0].data.timeKey + "月" + '<br/>' + str + params[0].value;
            } else {
              return params[0].data.timeKey + '<br/>' + str + params[0].value;
            }
          }
        },
        xAxis: {
          data: xData,
          axisLabel: {
            formatter: val => {
              if (this.time == 5) {
                return val + "月";
              } else {
                return val
              }
            },
            // textStyle: {
            //   color: '#73748D'
            // }
          },
        },
        grid: {
          left: "3%",
          right: "2%",
          bottom: "1%",
          top: "3%",
          // width: "90%",
          containLabel: true
        },

        yAxis: [
          {
            axisLine: {
              show: false,
              lineStyle: {
                color: "rgba(115, 116, 141, 1)"
              }
            },
            splitLine: {
              //网格线
              // lineStyle: {
              //   type: "dashed", //设置网格线类型 dotted：虚线   solid:实线
              //   color: ["rgba(125, 156, 243, 1)"]
              // },
              show: false //隐藏或显示
            }
          },
        ],
        series: [
          {
            // name: "环比上涨",
            type: "line",
            itemStyle: {
              //
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  //   { offset: 0, color: "rgba(255,255,255,0)" },
                  { offset: 1, color: "#439CF5" }
                ])
              }
            },
            // position: ["50%", "50%"],
            barWidth: "50%",
            data: yData
          }
        ]
      });
    }
  }
}
</script>

<style scoped>
</style>